<template>
    <div>
        <el-dropdown @command="handleCommand" v-if="!dialogVisible">
            <span class="el-dropdown-link">
              {{admin.Username}} <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="log-out" divided> 退出登录 </el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
        <div>
            <el-dialog title="登录管理员"
                       :visible.sync="dialogVisible"
                       lock-scroll
                       :append-to-body="true"
                       :close-on-click-modal="false"
                       :close-on-press-escape="false"
                       center
                       width="400px"
                       :show-close="false">
                <div>
                    <el-form :model="form" label-width="60px">
                        <el-form-item label="用户名:">
                            <el-input v-model="form.Username" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="密码:">
                            <el-input v-model="form.Password" autocomplete="off" type="password"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="login()">登录</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    export default {
        name: "login",
        data(){
            return {
                dialogVisible: false,
                admin:{},
                auth:"",
                form:{
                    Username:"",
                    Password:""
                }
            }
        },
        created(){
            let auth = localStorage.getItem("Authorization");
            auth = auth?auth:"";
            if(auth) {
                this.setAuth(auth);
                this.$axios.get("/admin/info").then((response)=>{
                    if(response.data.admin) {
                        this.dialogVisible = false;
                        this.admin = response.data.admin;
                        this.auth = auth;
                    } else {
                        this.dialogVisible = true;
                    }
                }).catch(()=>{
                    this.dialogVisible = true
                })
            } else {
                this.dialogVisible = true
            }
        },
        methods:{
            setAuth(auth) {
                this.$axios.defaults.headers.common['Authorization'] = auth;
                this.$upload.defaults.headers.common['Authorization'] = auth;
                localStorage.setItem("Authorization", auth);
                this.auth = auth;
            },
            handleCommand(command) {
                switch (command) {
                    case "log-out":
                        this.$axios.defaults.headers.common['Authorization'] = "";
                        this.dialogVisible = true;
                        localStorage.removeItem("Authorization");
                }
            },
            login() {
                this.$axios.post("/admin/sign-in", this.form).then((response)=>{
                    if(response.data.admin) {
                        this.dialogVisible = false;
                        this.admin = response.data.admin;
                        let auth = response.data.authorization;
                        this.setAuth(auth);
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>